<template>
  <div class="w-full">
    <div class="flex items-center justify-center text-sm text-ship-cove pb-1 gap-2 font-bold"><svg class="w-6 h-6"
        width="20px" height="11px" viewBox="0 0 20 11" version="1.1" xmlns="http://www.w3.org/2000/svg"
        xmlns:xlink="http://www.w3.org/1999/xlink">
        <title>Group 25</title>
        <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
          <g id="Group-25" fill="currentColor">
            <g id="Group-24" transform="translate(0.000000, 6.000000)">
              <path
                d="M3.5,2.5 C3.5,2.84779295 3.55072818,3.1837377 3.64518909,3.5008388 L1,3.5 C0.44771525,3.5 6.76353751e-17,3.05228475 0,2.5 C-6.76353751e-17,1.94771525 0.44771525,1.5 1,1.5 L3.64500846,1.49976776 C3.55066351,1.81669069 3.5,2.1524288 3.5,2.5 Z M19,1.5 C19.5522847,1.5 20,1.94771525 20,2.5 C20,3.05228475 19.5522847,3.5 19,3.5 L10.3548109,3.5008388 C10.4492718,3.1837377 10.5,2.84779295 10.5,2.5 C10.5,2.1524288 10.4493365,1.81669069 10.3549915,1.49976776 L19,1.5 Z"
                id="Combined-Shape"></path>
              <path
                d="M7,0 C8.38071187,0 9.5,1.11928813 9.5,2.5 C9.5,3.88071187 8.38071187,5 7,5 C5.61928813,5 4.5,3.88071187 4.5,2.5 C4.5,1.11928813 5.61928813,0 7,0 Z"
                id="Path" fill-rule="nonzero"></path>
            </g>
            <g id="Group-24" transform="translate(10.000000, 2.500000) scale(-1, 1) translate(-10.000000, -2.500000) ">
              <path
                d="M3.5,2.5 C3.5,2.84779295 3.55072818,3.1837377 3.64518909,3.5008388 L1,3.5 C0.44771525,3.5 6.76353751e-17,3.05228475 0,2.5 C-6.76353751e-17,1.94771525 0.44771525,1.5 1,1.5 L3.64500846,1.49976776 C3.55066351,1.81669069 3.5,2.1524288 3.5,2.5 Z M19,1.5 C19.5522847,1.5 20,1.94771525 20,2.5 C20,3.05228475 19.5522847,3.5 19,3.5 L10.3548109,3.5008388 C10.4492718,3.1837377 10.5,2.84779295 10.5,2.5 C10.5,2.1524288 10.4493365,1.81669069 10.3549915,1.49976776 L19,1.5 Z"
                id="Combined-Shape"></path>
              <path
                d="M7,0 C8.38071187,0 9.5,1.11928813 9.5,2.5 C9.5,3.88071187 8.38071187,5 7,5 C5.61928813,5 4.5,3.88071187 4.5,2.5 C4.5,1.11928813 5.61928813,0 7,0 Z"
                id="Path" fill-rule="nonzero"></path>
            </g>
          </g>
        </g>
      </svg> Filter by Brand, Category or Retailers</div>
    <div class="bg-white shadow rounded-lg overflow-hidden w-full border border-periwinkle-gray">

      <div v-for="(sideBarItem, childIndex) in filterNavListData" :key="sideBarItem.title"
        class="border-b border-fog undefined">
        <div class="flex justify-end items-center gap-3 cursor-pointer p-3 hover:bg-gray-100"
          @click="() => onSelectHandle(sideBarItem)">
          <div class="flex-1 text-cape-cod cursor-pointer flex-1">
            <div>{{sideBarItem.title}}
              <!-- -->
              <div class="text-xs inline bg-gray-200 px-1 py-1 rounded-lg">{{sideBarItem.count}}</div>
            </div>
          </div>
          <svg class="w-4 h-4 text-periwinkle-gray mr-1 " width="16px" height="16px" viewBox="0 0 16 16" version="1.1"
            xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
            <title>Icons/Chevron down</title>
            <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round"
              stroke-linejoin="round">
              <g id="Icons/Chevron-down" stroke="currentColor" stroke-width="1.71428571">
                <polyline id="Path" points="14 5 8 11 2 5"></polyline>
              </g>
            </g>
          </svg>
        </div>

        <div v-if="sideBarItem.isSelect && sideBarItem.child?.length && sideBarItem.title === 'Categories'">
          <div v-if="selectFilterCategoriesNav(sideBarItem.child || [])">
            <div v-for="child in selectFilterCategoriesNav(sideBarItem.child || [])" :key="child.title"
              class="text-base cursor-pointer flex justify-start items-center gap-2 p-2 whitespace-normal select-none"
              @click="unSelectFilterSideNavHandle(childIndex, child)">
              <div class="w-4.5 h-4.5 border rounded flex justify-center items-center bg-ink border-ink text-white">
                <svg class="w-2.5 h-2.5" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <title>Icons/Tick2</title>
                  <g id="Icons/Tick2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <path
                      d="M15.4142482,5.41423067 C16.1952506,4.63316823 16.1952506,3.36684427 15.4142482,2.58578183 C14.6332457,1.80473939 13.3668418,1.80473939 12.5858393,2.58578183 L6.00001875,9.17162241 L3.41423067,6.58579433 C2.63316823,5.80475189 1.36684427,5.80475189 0.585781831,6.58579433 C-0.19526061,7.36685677 -0.19526061,8.63322073 0.585781831,9.41422317 L4.58579433,13.4142357 C5.36685677,14.1952381 6.63318073,14.1952381 7.41424317,13.4142357 L15.4142482,5.41423067 Z"
                      id="Shape" fill="currentColor"></path>
                  </g>
                </svg>
              </div>
              <div class="text-cape-cod inline-flex whitespace-normal flex-row flex-wrap items-center">{{child.title}}
              </div>
            </div>
          </div>

          <div class="relative p-3" v-show="!selectFilterCategoriesNav(sideBarItem.child || []).length">
            <div class="flex flex-col gap-2 select-none">
              <div>
                <div v-for="item in sideBarItem.child" :key="item.title"
                  @click="() => selectFilterSideNavHandle(childIndex,item)"
                  class="text-base cursor-pointer flex justify-start items-center gap-2 p-2 whitespace-normal select-none">
                  <div class="w-4.5 h-4.5 border rounded flex justify-center items-center border-steel bg-transparent">
                  </div>
                  <div class="text-cape-cod inline-flex whitespace-normal flex-row flex-wrap items-center">
                    {{item.title}}
                    <span class="pl-1 text-sm text-gray-400">(5026)</span>
                  </div>
                </div>
              </div>
              <div v-if="sideBarItem.child?.length && sideBarItem.child?.length>10"
                class="flex flex-col justify-start items-center gap-1">
                <div class="text-xs text-cape-cod">Displaying 10 items.</div><button
                  class="block text-sm font-bold text-ink">Show more</button>
              </div>
            </div>
          </div>
        </div>

        <div v-if="sideBarItem.isSelect && sideBarItem.child?.length && sideBarItem.title !== 'Categories'">
          <div v-if="selectFilterSideNav(sideBarItem.child || [])">
            <div v-for="child in selectFilterSideNav(sideBarItem.child || [])" :key="child.title"
              class="text-base cursor-pointer flex justify-start items-center gap-2 p-2 whitespace-normal select-none"
              @click="unSelectSideNavHandle(sideBarItem.child, child)">
              <div class="w-4.5 h-4.5 border rounded flex justify-center items-center bg-ink border-ink text-white">
                <svg class="w-2.5 h-2.5" width="16px" height="16px" viewBox="0 0 16 16" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                  <title>Icons/Tick2</title>
                  <g id="Icons/Tick2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                    <path
                      d="M15.4142482,5.41423067 C16.1952506,4.63316823 16.1952506,3.36684427 15.4142482,2.58578183 C14.6332457,1.80473939 13.3668418,1.80473939 12.5858393,2.58578183 L6.00001875,9.17162241 L3.41423067,6.58579433 C2.63316823,5.80475189 1.36684427,5.80475189 0.585781831,6.58579433 C-0.19526061,7.36685677 -0.19526061,8.63322073 0.585781831,9.41422317 L4.58579433,13.4142357 C5.36685677,14.1952381 6.63318073,14.1952381 7.41424317,13.4142357 L15.4142482,5.41423067 Z"
                      id="Shape" fill="currentColor"></path>
                  </g>
                </svg>
              </div>
              <div class="text-cape-cod inline-flex whitespace-normal flex-row flex-wrap items-center">{{child.title}}
              </div>
            </div>
          </div>

          <div class="relative p-3">
            <div class="flex flex-col gap-2 select-none">
              <input type="text" class="block w-full border border-steel rounded p-2 text-cape-cod placeholder-steel"
                placeholder="Search retailers" @input="(event: Node) => onFilterKey(event, childIndex)">
              <div>
                <div v-for="item in filterSideNav(sideBarItem.child)" :key="item.title"
                  @click="() => selectSideNavHandle(sideBarItem.child, item)"
                  class="text-base cursor-pointer flex justify-start items-center gap-2 p-2 whitespace-normal select-none">
                  <div class="w-4.5 h-4.5 border rounded flex justify-center items-center border-steel bg-transparent">
                  </div>
                  <div class="text-cape-cod inline-flex whitespace-normal flex-row flex-wrap items-center">
                    {{item.title}}
                    <span class="pl-1 text-sm text-gray-400">(5026)</span>
                  </div>
                </div>
              </div>
              <div v-if="sideBarItem.child?.length && sideBarItem.child?.length>10"
                class="flex flex-col justify-start items-center gap-1">
                <div class="text-xs text-cape-cod">Displaying 10 items.</div><button
                  class="block text-sm font-bold text-ink">Show more</button>
              </div>
            </div>
          </div>
        </div>

      </div>


    </div>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue'
import { useFilterNav, FilterNav } from './useFilterNav';
import store, { SET_SEARCH_LIST } from '@/store';
import trim from 'lodash/trim'
import cloneDeep from 'lodash/cloneDeep';
export default defineComponent({

  setup() {
    const { filterNavList } = useFilterNav();
    const filterNavListData = ref(cloneDeep(filterNavList))

    const selectList = computed(() => store.state.searchList);

    const onSelectHandle = (item: FilterNav) => {
      filterNavListData.value = filterNavListData.value.map(obj => {
        if (obj.title === item.title) {
          return { ...obj, isSelect: !item.isSelect }
        }
        return { ...obj }
      })
    }


    const selectFilterSideNav = (items: FilterNav["child"] = []) => {
      return items.filter((obj: FilterNav) => {
        const data = selectList.value.find((item: { title: string; }) => item.title === obj.title)
        obj.isSelect = data ? data.isSelect : false
        console.log(obj.isSelect, 'obj.isSelect')
        return obj.isSelect
      })
    }

    const selectFilterCategoriesNav = (items: FilterNav["child"] = []) => {
      return items.filter((obj: FilterNav) => {
        return obj.isSelect
      })
    }

    const filterSideNav = (items: FilterNav["child"] = []) => {
      return items.filter((obj: FilterNav) => !obj.isSelect)
    }

    const selectFilterSideNavHandle = (childIndex: number, item: FilterNav) => {
      filterNavListData.value[childIndex].child = filterNavListData.value[childIndex].child?.filter(obj => {
        obj.title === item.title ? obj.isSelect = true : obj.isSelect = false
        return obj.isSelect
      })
    }

    const unSelectFilterSideNavHandle = (childIndex: number, item: FilterNav) => {
      filterNavListData.value[childIndex].child = cloneDeep(filterNavList)[childIndex].child?.map(obj => {
        if (obj.title === item.title) {
          obj.isSelect = false
        }
        return { ...obj }
      })
    }

    const unSelectSideNavHandle = (items: FilterNav[], item: FilterNav) => {
      const data = items?.filter((obj: FilterNav) => {
        if (obj.title === item.title) {
          obj.isSelect = false
        }
        return obj.isSelect
      })
      store.commit(SET_SEARCH_LIST, data)
    }

    const selectSideNavHandle = (items: FilterNav[], item: FilterNav) => {
      const data = items?.filter((obj: FilterNav) => {
        if (obj.title === item.title) {
          obj.isSelect = true
        }
        return obj.isSelect
      })
      store.commit(SET_SEARCH_LIST, data)
    }

    // 搜索
    const onFilterKey = (event: Node, childIndex: number) => {
      // @ts-ignore
      const value = trim(event.target.value as any) || ''
      if (!value) {
        filterNavListData.value[childIndex].child = cloneDeep(filterNavList)[childIndex].child
        return
      }
      // 根据输入的字符过滤title的数据 并且已选中的
      filterNavListData.value[childIndex].child = filterNavListData.value[childIndex]?.child?.filter((obj: FilterNav) => {
        return obj.title.toUpperCase().includes(value.toUpperCase()) || obj.isSelect
      })
    }

    return {
      filterNavListData,
      onSelectHandle,
      selectFilterSideNav,
      selectFilterSideNavHandle,
      unSelectFilterSideNavHandle,
      unSelectSideNavHandle,
      selectSideNavHandle,
      filterSideNav,
      onFilterKey,
      selectFilterCategoriesNav
    }
  }

})
</script> 
